<template>
  <div class="config-place-stuck detail f-14" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="fr ac">
      <h2 class="title f1">卡点编辑</h2>
      <div class="f-14 a link" @click="importBox.show = true">批量导入<i class="el-icon-plus b ml-5"></i></div>
    </div>
    <div class="card">
      <div class="fr ac item">
        <div class="label">卡点ID</div>
        <span>{{form.stuckid}}</span>
      </div>
      <div class="fr ac item">
        <div class="label">卡点名称</div>
        <el-input v-model="form.stuckname"/>
      </div>
      <div class="fr ac item">
        <div class="label">卡点位置</div>
        <el-input v-model="form.stuckposition"/>
      </div>
      <div class="fr item">
        <div class="label pt-10">人员配置</div>
        <div class="fc">
          <div v-for="(item, index) in staffing" class="fr ac mb-10" :key="item.id">
            <el-input v-model="item.value"/>
            <i v-if="staffing.length > 1" class="el-icon-remove ml-10 a" style="color: #F56C6C;" @click="staffing.splice(index, 1)"></i>
          </div>
        </div>
        <span class="f-14 a link mb-20 ml-30" style="align-self: flex-end;" @click="staffing.push({ value: '', id: new Date() - 0})">添加</span>
      </div>
      <div class="fr ac item">
        <div class="label">负责人</div>
        <el-input v-model="form.contact"/>
      </div>
      <div class="fr ac item">
        <div class="label">联系电话</div>
        <el-input v-model="form.phone"/>
      </div>
      <div class="fr ac item">
        <div class="label">监控接口</div>
        <el-input v-model="form.monitoringinterface" style="width: 400px;"/>
      </div>
      <div class="fr item">
        <div class="label pt-10">设备配置</div>
        <div>
          <div v-for="(item, index) in deploy" class="fr ac mb-10" :key="item.id">
            <el-input v-model="item.name"/>
            <span class="ml-30 mr-10">编码</span>
            <el-input v-model="item.code"/>
            <span class="ml-30 mr-10">数量</span>
            <el-input disabled v-model="item.num"/>
            <i v-if="deploy.length > 1" class="el-icon-remove ml-10 a" style="color: #F56C6C;" @click="deploy.splice(index, 1)"></i>
          </div>
        </div>
        <span class="f-14 a link mb-20 ml-30" style="align-self: flex-end;" @click="deploy.push({ name: '', code: '', num: '1', id: new Date() - 0 })">添加</span>
      </div>

      <div class="tc mt-30">
        <el-button type="primary" @click="submit" :loading="submiting">保存</el-button>
      </div>
    </div>

    <import-box :show.sync="importBox.show"
                :demo-url="`/api/stuck/template/export?userid=${$store.state.user.userid}`"
                :url="`/api/stuck/batchimport?userid=${$store.state.user.userid}`"/>
  </div>
</template>

<script>
  import moment from '@/utils/moment'

  export default {
    name: 'config-place-stuck',
    props: [ 'id' ],
    data () {
      return {
        loading: false,
        submiting: false,
        form: {
          stuckid: '',
          stuckname: '',
          stuckposition: '',
          staffing: '',
          contact: '',
          phone: '',
          monitoringinterface: '',
          deploy: ''
        },
        staffing: [],
        deploy: [],
        importBox: {
          show: false
        }
      }
    },
    methods: {
      getDetail () {
        this.loading = true
        const form = {}
        if (this.id) form.tid = ~~this.id
        this.$http('/stuck/form', form).then(
          res => {
            const { data = {} } = res
            for (const k in this.form) {
              this.form[k] = data[k] || ''
            }
            this.staffing = this.form.staffing ? this.form.staffing.split(',').map((v, i) => ({ value: v, id: new Date() - 0 + i })) : [{ value: '', id: new Date() - 0 }]
            this.deploy = this.form.deploy ? JSON.parse(this.form.deploy).map((v, i) => {
              v.id = (new Date() - 0) + i
              return v
            }) : [{ name: '', code: '', num: '1', id: new Date() - 0 }]
            this.loading = false
          }
        )
      },
      validate () {
        if (!this.form.stuckname) {
          this.$notify.warning('请输入卡点名称')
          return false
        }
        if (!this.form.stuckposition) {
          this.$notify.warning('请输入卡点位置')
          return false
        }
        if (!this.staffing.filter(v => v.value).length) {
          this.$notify.warning('请输入人员配置')
          return false
        }
        if (!this.form.contact) {
          this.$notify.warning('请输入负责人')
          return false
        }
        if (!this.form.phone) {
          this.$notify.warning('请输入联系电话')
          return false
        }
        if (!this.deploy.filter(v => v.name && v.code && v.num).length) {
          this.$notify.warning('请输入设备配置')
          return false
        }
        return true
      },
      submit () {
        if (!this.validate()) return
        const form = Object.assign({}, this.form)
        const { id } = this
        if (id) {
          form.tid = ~~id
        } else {
          form.createtime = moment().format('YYYY-MM-DD HH:mm:ss')
        }
        form.staffing = this.staffing.map(v => v.value).filter(v => v).join(',')
        form.deploy = this.deploy.filter(v => v.name && v.code && v.num).length ? JSON.stringify(this.deploy.filter(v => v.name && v.code && v.num).map(v => {
          delete v.id
          return v
        })) : ''
        this.submiting = true
        this.$http('/stuck/saveOrUpdate', form).then(
          res => {
            this.$notify({
              title: '成功',
              message: `${id ? '保存' : '创建'}成功`,
              type: 'success'
            })
            this.submiting = false
            this.$router.replace('/config/place')
          }
        )
      }
    },
    created () {
      this.getDetail()
    }
  }
</script>
